<template>
	<view class="zywdC">
		<navbar></navbar>
		<textNavbar myprops="专业问答"></textNavbar>
		<view class="zywdC-content">
			<view class="zywdC-content-cn" v-for="item in article" :key="item.id">
				<view class="content-cn-top">
					<text class="top-left">{{item.type_name}}</text>
					<text class="top-datatime">{{item.add_time}}</text>
					<!-- <text class="top-time">10:19:10</text> -->
					<text class="top-read">阅读 {{item.visit}}</text>
				</view>
				<view class="content-cn-head">{{item.title}}</view>
				<view class="content-cn-text">
					<!-- <view class="content-cn-text-first">《中华人民共和国民法典》第一千零八十五条规定：离婚后，子女由一方直接抚养的，另一方应当负担部分或者全部抚养费。负担费用的多少和期限的长短,由双方协议；协议不成的，由人民法院判决。前款规定的协议或者判决,不妨碍子女在必要时向父母任何一方提出超过协议或者判决原定数额的合理要求。</view> -->
					<view class="content-cn-text-first">{{item.content}}</view>
					<!-- <view class="content-cn-text-second">实际生活中，父母应着眼于未成年人健康成长的合理需求，既排斥奢侈性的培养消费，也要提供基本的物质生活保障。同时，也应考虑抚养义务负担的均衡，直接抚养人往往已经承担了更多的金钱与感情投入，若另一方对固定数额外符合未成年人利益的支出不予承担，显然会加重直接抚养人的经济负担，既会破坏双方抚养义务负担的均衡，也会使直接抚养人对孩子进行有益投入的能力和意愿下降，最终可能会损害未成年人的合法权益。</view> -->
					<!-- <view class="cank">参考案例</view> -->
				</view>
				<view class="content-cn-bottom">
					<text>声明：本问答系作者结合法律法规、政府官网及互联网相关知识由平台律师整合提供，仅供参考。如涉侵权请联系平台客服，我们将按照规定及时处理。</text>
				</view>
				<tui-divider dividerColor="#ffffff">优选法律服务推荐</tui-divider>
				<view class="footer">
					<view class="footer-left">
						<van-icon :name="isLike ? tbkong : tbshi" :info="item.like" size="30px" @click="zanHandler" />
					</view>
					<view class="green">
						<image src="../../../static/白电话.png" mode="" @click="jishi"></image>
						<view class="" style="width: 1px; height: 25px; background-color: white;"></view>
						<view class="wt" @click="weit">
							<text class="wtls">委托律师</text>
							<text class="bendi">本地专家律师1对1</text>
						</view>
						<view style="width: 1px; height: 25px; background-color: white;"></view>
						<view class="wt" @click="mianf">
							<text class="wtls">免费咨询</text>
							<text class="bendi">每天两次免费问</text>
						</view>
						<view style="width: 1px; height: 25px; background-color: white;"></view>
						<view class="right" @click="open">
							<van-icon name="qr" color="white" size="28px"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		<van-toast id="van-toast" />
		<van-popup
		  :show="show"
		  position="bottom"
			closeable
			round
		  custom-style="height: 40%; background-color: #EDEDED;"
		  @close="onClose">
			<view class="van-popup">
				<text>选择更多法律服务</text>
				<view class="van-popup-view" @click="tiao">
					<view class="van-popup-view-vw">
						<image src="../../../static/白咨询.png" mode=""></image>
						<text>免费咨询</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白私问.png" mode=""></image>
						<text>私问</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白电话.png" mode=""></image>
						<text>电话咨询</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白律师.png" mode=""></image>
						<text>律师约见</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白背章.png" mode=""></image>
						<text>合同审查</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白文书.png" mode=""></image>
						<text>文书代写</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白律师函.png" mode=""></image>
						<text>律师函</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白户籍.png" mode=""></image>
						<text>户籍调查</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白起诉状.png" mode=""></image>
						<text>民事起诉状</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白离婚.png" mode=""></image>
						<text>离婚咨询</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白仲裁.png" mode=""></image>
						<text>劳动仲裁委托</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白委托.png" mode=""></image>
						<text>委托律师</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白工伤.png" mode=""></image>
						<text>工伤赔偿</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白协议.png" mode=""></image>
						<text>合伙协议</text>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import { questionsDeatil, userLike } from "../../../utils/utils";
	import tuiDivider from "@/components/thorui/tui-divider/tui-divider.vue"
	import Toast from '@vant/weapp/dist/toast/toast';
	export default {
		components:{
			tuiDivider
		},
		data() {
			return {
				list: [], // 初始数组1
				article: [], // 初始数组2
				id: '', // 文章id
				tbkong: "good-job-o",
				tbshi: "good-job",
				isLike: true,
				show: false,
			}
		},
		onLoad(option) {
			// console.log(option);
			let a = {
				id: String(option.id)
			}
			this.id = option.id
			questionsDeatil(a, (res) => {
				// console.log('内容', res);
				// console.log('内容', res.data);
				this.list = res.data.list
				this.article.push(res.data.article)
				console.log(this.article);
			})
			const likedStatus = uni.getStorageSync('likedStatus');
			// console.log(likedStatus);
			if (likedStatus !== undefined) {
				this.isLike = likedStatus;
			}
		},
		methods: {
			// 点赞
			zanHandler () {
				let that = this
				userLike(this.id, (res) => {
					console.log('文章点赞', res);
					if (res.status == 200) {
						Toast(res.mgs)
						that.$nextTick(() => {
							questionsDeatil(that.id, (res) => {
							this.list = res.data.list
							this.article.push(res.data.article)
							that.isLike = false
							let a = false
							uni.setStorageSync('aaa', a);
							})
						})
					} else {
						Toast(res.msg)
						this.isLike = false
						let a = false
						uni.setStorageSync('likedStatus', a);
					}
				})
			},
			// 跳转到计时电话页
			jishi () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=计时电话"
				})
			},
			// 跳转到委托律师页
			weit () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=委托律师"
				})
			},
			// 跳转到免费咨询页
			mianf () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=免费咨询"
				})
			},
			// 打开模态框
			open () {
				this.show = true
			},
			// 关闭模态框
			onClose () {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zywdC {
		width: 100vw;
		height: 100vh;
	}
	.zywdC-content {
		width: 100vw;
		height: 600px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.zywdC-content-cn {
		width: 94vw;
		height: 600px;
	}
	.content-cn-top {
		height: 20px;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #bac7d3;
	}
	.content-cn-top > .top-left {
		font-weight: bold;
		color: black;
	}
	.content-cn-top > .top-datatime {
		margin: 0 5px 0 10px;
	}
	.content-cn-top > .top-left {
		margin-right: 5px;
	}
	
	.content-cn-head {
		font-size: 24px;
		font-weight: bolder;
		margin: 20px 0;
	}
	
	.content-cn-text {
		display: flex;
		flex-direction: column;
		font-size: 15px;
	}
	.content-cn-text > .content-cn-text-first {
		margin: 0 0 20px 0;
	}
	.content-cn-text > .cank {
		margin: 20px 0;
	}
	.content-cn-bottom {
		color: #ccccd0;
		font-size: 12px;
		text-align: center;
	}
	
	.footer {
		width: 100vw;
		height: 70px;
		background-color: white;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.footer > .footer-left {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.green {
		width: 300px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #1aad19;
		border-radius: 30px;
		margin-right: 10px;
	}
	.green > image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-left: 5px;
	}
	.green > .wt {
		width: 90px;
		height: 30px;
		font-size: 12px;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wt > .bendi {
		font-size: 10px;
	}
	.right {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 3px;
	}
	
	.van-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.van-popup > text {
		font-size: 28rpx;
		margin-top: 40rpx;
	}
	.van-popup > .van-popup-view {
		width: 91%;
		height: 91%;
	}
	.van-popup-view {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.van-popup-view-vw > image {
		width: 84rpx;
		height: 84rpx;
	}
	.van-popup-view-vw {
		width: 20%;
		height: 128rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.van-popup-view :nth-child(11) > text {
		width: 144rpx;
	}
	
	.van-popup-view-vw > text {
		font-size: 24rpx;
	}
</style>
